<template>
  <div>
    <template>
      <div class="main">
        <el-row>
          <el-col>
            <el-row>
              <el-col :span="16">
                <el-card class="box-card">
                  <el-tabs>
                    <el-tab-pane label="问题求解">
                      <problems></problems>
                    </el-tab-pane>
                    <el-tab-pane label="学习干货">
                      <study></study>
                    </el-tab-pane>
                    <el-tab-pane label="校园那些事">
                      <school></school>
                    </el-tab-pane>
                  </el-tabs>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card
                  class="box-card"
                  style="margin-left: 20px"
                  v-if="login"
                >
                  <userPanel></userPanel>
                </el-card>
                <!-- 广告轮播图 -->
                <div style="margin-left: 20px; margin-bottom: 20px">
                  <adPanel></adPanel>
                </div>
                <!-- 话题前十 -->
                <div style="margin-left: 20px">
                  <top10Panel></top10Panel>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </template>
  </div>
</template>

<script>
import problems from './problems.vue'
import study from './study.vue'
import school from './school.vue'
import userPanel from './user_panel.vue'
import adPanel from '../_partials/ad_panel'
import top10Panel from '../_partials/top10_panel'
export default {
  data () {
    return {
      login: false
    }
  },
  created () {
    this.isLogin()
  },
  methods: {
    isLogin () {
      if (JSON.parse(sessionStorage.getItem('user'))) {
        this.login = true
      } else {
        this.login = false
      }
    }
  },
  components: {
    problems,
    study,
    school,
    userPanel,
    adPanel,
    top10Panel
  }
}
</script>

<style lang="less" scoped>
</style>
